<template>
  <div class="recommendContainer">
    <Navbar TitleName="网易严选"></Navbar>
    <div class="recommendBox">
      <div class="header-box">
        <div
          class="header-content"
          @click="currentIndex = index"
          :class="{ active: currentIndex === index }"
          v-for="(c2, index) in categoryL2List"
          :key="c2.id"
        >
          <span>{{ c2.name }}</span>
        </div>
      </div>
    </div>
    <div class="main">
      <!-- <div class="mask"></div> -->
      <div class="content-box" v-show="currentIndex === 0">
        <ul class="contentList">
          <li
            class="contentItem"
            v-for="(r1, index) in recommendDetailList1"
            :key="r1.id"
            @click="toDetail(r1)"
          >
            <img class="contentImg" :src="r1.listPicUrl" alt="" />
            <div class="contentText">
              {{ r1.name }}&nbsp;&nbsp;{{ r1.simpleDesc }}
            </div>
            <div class="contentPrice">
              <span class="contentPrice-symbol1">￥</span>
              <span class="retailPrice">{{ r1.retailPrice }}&nbsp;&nbsp;</span>
              <span class="sortOriginPrice">￥{{ r1.sortOriginPrice }}</span>
            </div>
            <div class="contentDetail">
              <div class="contentDetail-left">
                <span class="contentDetailtext1">{{
                  r1.finalPriceInfoVO.banner
                    ? r1.finalPriceInfoVO.banner.content
                    : "新人特价"
                }}</span>
              </div>
              <div class="contentDetail-right">
                <span class="contentDetailtext2">仅剩1天</span>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="content-box" v-show="currentIndex === 1">
        <ul class="contentList">
          <li
            class="contentItem"
            v-for="(r2, index) in recommendDetailList2"
            :key="r2.id"
            @click="toDetail(r2)"
          >
            <router-link to="">
              <img class="contentImg" :src="r2.listPicUrl" alt="" />
            </router-link>
            <div class="contentText">
              {{ r2.name }}&nbsp;&nbsp;{{ r2.simpleDesc }}
            </div>
            <div class="contentPrice">
              <span class="contentPrice-symbol1">￥</span>
              <span class="retailPrice">{{ r2.retailPrice }}&nbsp;&nbsp;</span>
              <span class="sortOriginPrice">￥{{ r2.sortOriginPrice }}</span>
            </div>
            <div class="contentDetail">
              <div class="contentDetail-left">
                <span class="contentDetailtext1">{{
                  r2.finalPriceInfoVO.banner
                    ? r2.finalPriceInfoVO.banner.content
                    : "新人特价"
                }}</span>
              </div>
              <div class="contentDetail-right">
                <span class="contentDetailtext2">仅剩1天</span>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="content-box" v-show="currentIndex === 2">
        <ul class="contentList">
          <li
            class="contentItem"
            v-for="(r3, index) in recommendDetailList3"
            :key="r3.id"
            @click="toDetail(r3)"
          >
            <router-link to="">
              <img class="contentImg" :src="r3.listPicUrl" alt="" />
            </router-link>
            <div class="contentText">
              {{ r3.name }}&nbsp;&nbsp;{{ r3.simpleDesc }}
            </div>
            <div class="contentPrice">
              <span class="contentPrice-symbol1">￥</span>
              <span class="retailPrice">{{ r3.retailPrice }}&nbsp;&nbsp;</span>
              <span class="sortOriginPrice">￥{{ r3.sortOriginPrice }}</span>
            </div>
            <div class="contentDetail">
              <div class="contentDetail-left">
                <span class="contentDetailtext1">{{
                  r3.finalPriceInfoVO.banner
                    ? r3.finalPriceInfoVO.banner.content
                    : "新人特价"
                }}</span>
              </div>
              <div class="contentDetail-right">
                <span class="contentDetailtext2">仅剩1天</span>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import Navbar from '@/components/Navbar'
export default {
  name: "RecommendDetail",
  components:{
    Navbar
  },
  data() {
    return {
      categoryL2List: [],
      currentIndex: 0,
    };
  },
  mounted() {
    // console.log (1);
    this.categoryL2List = JSON.parse(this.$route.query.categoryL2List);
    this.currentIndex = +this.$route.query.flag;
    // console.log (this.c2List);
    this.getRecommendDetailList();
  },
  methods: {
    getRecommendDetailList() {
      this.$store.dispatch("getRecommendDetailList");
    },
    toDetail(rd){
      console.log (rd);
      this.$router.push(`/goodsdetail?rd=${JSON.stringify(rd)}`)
    }
  },
  computed: {
    ...mapState({
      recommendDetailList1: (state) =>
        state.recommenddetail.recommendDetailList.slice(0, 30),
      recommendDetailList2: (state) =>
        state.recommenddetail.recommendDetailList.slice(31, 60),
      recommendDetailList3: (state) =>
        state.recommenddetail.recommendDetailList.slice(61, 83),
    }),
  },
};
</script>

<style lang="less" scoped>
.recommendContainer {
  overflow: hidden;
  background-color: #eeeeee;
  width: 100%;
  .recommendBox {
    position: relative;
    top: 0;
    left: 0;
    .header-box {
      position: absolute;
      top: 0px;
      left: 0;
      background-color: #ffffff;
      width: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 30px;
      .header-content {
        height: 30px;
        line-height: 30px;
        font-size: 14px;
      }
      .active {
        border-bottom: 2px solid red;
        box-sizing: border-box;
      }
    }
  }
  .main {
    margin-top: 30px;
    .mask {
      width: 100%;
      height: 40px;
    }
    .content-box {
      margin-top: 20px;
      background-color: white;
      .contentList {
        display: flex;
        flex-wrap: wrap;
        .contentItem {
          display: flex;
          // flex-direction: column;
          flex-wrap: wrap;
          width: 50%;
          box-sizing: border-box;
          padding: 10px;
          .contentImg {
            width: 170px;
            height: 170px;
            border-radius: 10px;
          }
          .contentText {
            font-size: 16.5px;
          }
          .contentPrice {
            width: 100%;
            color: red;
            font-size: 22px;
            .contentPrice-symbol1 {
              font-size: 13px;
            }
            .sortOriginPrice {
              text-decoration: line-through;
              color: #999;
              font-size: 13px;
            }
          }
          .contentDetail {
            display: flex;
            background-color: #ffe9eb;
            justify-content: flex-start;
            border-radius: 10px;
            width: 100%;
            padding: 2px;
            .contentDetail-left {
              background-color: red;
              border-radius: 10px;
              padding: 0 10px;
              .contentDetailtext1 {
                font-size: 11px;
                color: #ffffff;
                font-weight: bolder;
              }
            }
            .contentDetail-right {
              .contentDetailtext2 {
                font-size: 11px;
                color: red;
                font-weight: bolder;
                margin-left: 10px;
              }
            }
          }
        }
      }
      // }
    }
  }
}
</style>